<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../">
  <title data-ice="title">src/elementMgr.js | live2d-widget.js</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<meta name="description" content="Add the Sseexxyyy live2d to webpages."><meta property="twitter:card" content="summary"><meta property="twitter:title" content="live2d-widget.js"><meta property="twitter:description" content="Add the Sseexxyyy live2d to webpages."></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/xiazeyu/live2d-widget.js"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/index.js~L2Dwidget.html">L2Dwidget</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-PlatformManager">PlatformManager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-captureFrame">captureFrame</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-theRealInit">theRealInit</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-cManager">cManager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-cModel">cModel</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createElement">createElement</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getCurrentPath">getCurrentPath</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-cDefine">cDefine</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-currWebGL">currWebGL</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#config">config</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-configApplyer">configApplyer</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib">lib</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-EYE_STATE">EYE_STATE</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DBaseModel">L2DBaseModel</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DExpressionMotion">L2DExpressionMotion</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DExpressionParam">L2DExpressionParam</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DEyeBlink">L2DEyeBlink</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DMatrix44">L2DMatrix44</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DModelMatrix">L2DModelMatrix</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DMotionManager">L2DMotionManager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DPartsParam">L2DPartsParam</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DPhysics">L2DPhysics</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DPose">L2DPose</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DTargetPoint">L2DTargetPoint</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-L2DViewMatrix">L2DViewMatrix</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Live2DFramework">Live2DFramework</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils">utils</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-MatrixStack">MatrixStack</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-ModelSettingJson">ModelSettingJson</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">src/elementMgr.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">/**
 * @description The container and manager for all the DOM and WebGL emelents.
 */


import { config } from &apos;./config/configMgr&apos;;
import { L2Dwidget } from &apos;./index&apos;;
import { createDialogElement } from &apos;./dialog&apos;;

/**
 * The current WebGL element
 * @type {RenderingContext}
 */

let currWebGL = undefined;

/**
 * The current canvas element
 * @type {HTMLElement}
 */

let currCanvas;


/**
 * Create the canvas and styles using DOM
 * @return {null}
 */

function createElement() {

  let e = document.getElementById(config.name.div)
  if (e !== null) {
    document.body.removeChild(e);
  }

  let newElem = document.createElement(&apos;div&apos;);
  newElem.id = config.name.div;
  newElem.className = &apos;live2d-widget-container&apos;;
  newElem.style.setProperty(&apos;position&apos;, &apos;fixed&apos;);
  newElem.style.setProperty(config.display.position, config.display.hOffset + &apos;px&apos;);
  newElem.style.setProperty(&apos;bottom&apos;, config.display.vOffset + &apos;px&apos;);
  newElem.style.setProperty(&apos;width&apos;, config.display.width + &apos;px&apos;);
  newElem.style.setProperty(&apos;height&apos;, config.display.height + &apos;px&apos;);
  newElem.style.setProperty(&apos;z-index&apos;, 99999);
  newElem.style.setProperty(&apos;opacity&apos;, config.react.opacity);
  newElem.style.setProperty(&apos;pointer-events&apos;, &apos;none&apos;);
  document.body.appendChild(newElem);
  L2Dwidget.emit(&apos;create-container&apos;, newElem);

  if (config.dialog.enable)
    createDialogElement(newElem);

  let newCanvasElem = document.createElement(&apos;canvas&apos;);
  newCanvasElem.setAttribute(&apos;id&apos;, config.name.canvas);
  newCanvasElem.setAttribute(&apos;width&apos;, config.display.width * config.display.superSample);
  newCanvasElem.setAttribute(&apos;height&apos;, config.display.height * config.display.superSample);
  newCanvasElem.style.setProperty(&apos;position&apos;, &apos;absolute&apos;);
  newCanvasElem.style.setProperty(&apos;left&apos;, &apos;0px&apos;);
  newCanvasElem.style.setProperty(&apos;top&apos;, &apos;0px&apos;);
  newCanvasElem.style.setProperty(&apos;width&apos;, config.display.width + &apos;px&apos;);
  newCanvasElem.style.setProperty(&apos;height&apos;, config.display.height + &apos;px&apos;);
  if (config.dev.border) newCanvasElem.style.setProperty(&apos;border&apos;, &apos;dashed 1px #CCC&apos;);
  newElem.appendChild(newCanvasElem);

  currCanvas = document.getElementById(config.name.canvas);
  L2Dwidget.emit(&apos;create-canvas&apos;, newCanvasElem);

  initWebGL();

}

/**
 * Find and set the current WebGL element to the container
 * @return {null}
 */

function initWebGL() {

  var NAMES = [&apos;webgl2&apos;, &apos;webgl&apos;, &apos;experimental-webgl2&apos;, &apos;experimental-webgl&apos;, &apos;webkit-3d&apos;, &apos;moz-webgl&apos;];
  for (let i = 0; i &lt; NAMES.length; i++) {
    try {
      let ctx = currCanvas.getContext(NAMES[i], {
        alpha: true,
        antialias: true,
        premultipliedAlpha: true,
        failIfMajorPerformanceCaveat: false,
      });
      if (ctx) currWebGL = ctx;
    } catch (e) { }
  }
  if (!currWebGL) {
    console.error(&apos;Live2D widgets: Failed to create WebGL context.&apos;);
    if (!window.WebGLRenderingContext) {
      console.error(&apos;Your browser may not support WebGL, check https://get.webgl.org/ for futher information.&apos;);
    }
    return;
  }
};


export {
  createElement,
  currWebGL,
  currCanvas,
}
</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
